<template>
	<view class="projectDetail">
		<view class="header">
			<view class="swiperWrap">
							<image :src='carousels[0]' mode="aspectFill" v-if="carousels.length === 1"></image>
							<swiper :autoplay="autoplay" :interval="interval" :duration="duration" circular v-if="carousels.length>1" >
								<swiper-item class='swiper_item' v-for="(item,index) in carousels" :key="index">
											<image :src='item' mode="aspectFill"></image>
								</swiper-item>
							</swiper>
							<view class="titleWrap info">
												<view class="title">
																		<view class="name">{{title}}</view>
															
																		<view class="subTitle">
																			<text class="type">{{type}}</text><text>{{status}}</text>
																		</view>
												</view>
															
													
											<image src="../../static/image/headerBg.png" mode="widthFix"></image>
							</view>
					
				
				
			</view>
			
			
			<view class="head-bottom" v-if="movieStatus !=='preheating'">
					<view class="cardWrap-content">
						<view class="data">
							<view class="bought">
								<text>已购金额(元)</text>
								<text>{{salesOfMoney}}</text>
							</view>
							<view class="right">
								<view class="reach dataItem">
									<text>达成率</text>
									<text>{{scale}}</text>
								</view>
								<view class="reach dataItem">
									<text>剩余份数</text>
									<text v-if="movieStatus ==='ing'">{{surplusNum}}份</text>
									<text v-if="movieStatus ==='pause' ||  movieStatus ==='bonus'|| movieStatus ==='finish'">{{movieStatusText}}</text>
								</view>
								
							</view>
							
						</view>
						<view class="progress-box">
							<progress :percent="percent" color="#FF1268" stroke-width="6" />
						</view>
				</view>
				<view class="cardWrap-footer">
					目标筹集金额{{totalOfMoney}}万
				</view>
			</view>
		
					<view class="condition" v-if="movieStatus==='preheating'">  
							<image src="../../static/image/jianbian.png" mode="widthFix"></image>
							<text>项目预热中  请等待开放</text> 
							<image src="../../static/image/jianbian.png" mode="widthFix"></image>
					</view>
					
					
					
		</view>
		<view class="buy_process">
			<view class="process_title">
				[ <text>认购流程</text> ]
			</view>
			<view class="process_content">
				<view class="item">
					<view class="item_iconWrap blueBj">
						<i class='iconfont '>&#xe6ef;</i>
					</view>
					<view class="item_info blue">
						客户了解认购项目
					</view>
					<text>→</text>
				</view>
				<view class="item">
					<view class="item_iconWrap orangeBj" >
						<i class='iconfont '>&#xe60f;</i>
					</view>
					<view class="item_info orange">
						客户确认认购份数给国锐影视预定份额，并支付款项
					</view>
					<text>→</text>
				</view>
				<view class="item">
					<view class="item_iconWrap greenBj">
						<i class='iconfont '>&#xe61c;</i>
					</view>
					<view class="item_info green">
						出品方签字合同生效后，国锐影视邮寄合同给购买客户
					</view>
					<text>→</text>
				</view>
				<view class="item">
					<view class="item_iconWrap redBj">
						<i class='iconfont '>&#xe67d;</i>
					</view>
					<view class="item_info red">
						{{incomeDetail}}
					</view>
					
				</view>
			</view>
			<view class="process_footer" v-if="riskWarning">
				<view @click="tip_Poup = true">
					<text>亏本风险提示</text>
					<i class='iconfont'>&#xe60e;</i>
				</view>
				
			</view>
		</view>
		<view class="buy_process Details">
			<view class="process_title">
				[ <text>详细介绍</text> ]
			</view>
			<view class="content">
				 <!-- <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view> -->

				<wxParse :content="content" />
				<view v-if='noContent' class="noContent">
					<text>加载中...</text>
				</view>
				
			</view>
		</view>
		<view class="footerTip">
			<view class="tipWord">
				<view class="agree">
					<view>
							点击认购代表阅读并同意<label class="red" @click="agreement">《视纪影视平台服务协议》</label>
					</view>
					
					<text>产品有风险，购买需谨慎</text>
				</view>
				
			</view>
		</view>
		<view class="goTop" v-if='floorstatus' @click="goTop">
			<i class='iconfont'>&#xe633;</i>
		</view>
		<view class="footerFixed">
				<view class="wrap" v-if="movieStatus=='ing'">
						<view class="left">
							<view @click="share_Poup=true"><i class='iconfont'>&#xe667;</i>分享</view>
							<view v-if="movieStatus==='ing'"><i class='iconfont'>&#xe603;</i>{{price}}/份</view>
						</view>
						<view v-if="movieStatus ==='ing'" class="buyBtn" @click="toOfferBuy" hover-class="toOfferBuy_hover">立即认购</view>
				</view>
				
				<view class="preheating" v-if="movieStatus !=='ing'">
						<view class="left">
							<view @click="share_Poup=true"><i class='iconfont'>&#xe667;</i>分享</view>
						</view>
						<!-- 预热中 -->
						<view v-if="movieStatus==='preheating'" class="preheatingText" >项目预热中  请等待开放</view>
						<!-- 停售 -->
						<view v-if="movieStatus==='pause'" class="preheatingText red" >暂停销售  等待权益发放</view>
						<!-- 售卖完成 -->
						<view v-if="movieStatus==='finish'" class="preheatingText gray" >项目结束   权益已发放</view>
						<!-- 待收益 -->
						<view v-if="movieStatus==='bonus'" class="preheatingText red" >筹款成功  等待权益发放</view>
						
				</view>
			
			 
		</view>
		<!-- 风险提示 -->
		
		<uni-popup class="tip_Poup" :show="tip_Poup" :type="middle" v-on:hidePopup="hidePopup" catchtouchmove="true">
			<view class="tip_Wrap">
				<view class="wordWrap">
					<view class="tipTitle">
							亏本风险提示
					</view>
					<view class="tipContent">{{riskWarning}}</view>
					<view class="tipButton" @click="hidePopup">
							知道了
					</view>
					
				</view>
			</view>
		</uni-popup>
		
		<!-- 分享 -->
		
		<uni-popup :show="share_Poup" :type="bottom" v-on:hidePopup="hidePopup">
			<view class="sharePoup">
				<view class="sharePoupWrap">
					<view class="top">
						<view class="item wachat">
							<image src="../../static/image/wachat.png" mode="widthFix"></image>
							<text>微信</text>
						</view>
						<view class="item friends">
							<image src="../../static/image/friends.png" mode="widthFix"></image>
							<text>朋友圈</text>
						</view>
						<view class="item weibo">
							<image src="../../static/image/weibo.png" mode="widthFix"></image>
							<text>新浪微博</text>
						</view>
					</view>
					<view class="bottom" @click="cancle">
						取消
					</view>
				</view>
			</view>
		</uni-popup>
	
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
import uniPopup from '@/components/uni-popup.vue';
import uniNumberBox from '@/components/uni-number-box';
import wxParse from '../../components/mpvue-wxparse/src/wxParse.vue';
var util = require('../../common/util.js');
export default {
    data() {
        return {
            webviewStyles: {
                progress: {
                    color: '#FF3333'
                }
            },
            autoplay: true,
            carousels: [],
            circular: true,
            interval: 2500,
            // scale: 0,
            duration: 1000,
            movieStatusText: '',
            bannerSrc: '',
            payType: 'e_wallet',
            riskWarning: '',
            movieId: 0,
            movieStatus: '',
            salesOfMoney: 0,
            totalOfMoney: 0,
            deposit: 0, //定金
            orderMoney: 0,
            scale: 0,
            percent: 0,
            surplusNum: 0,
            userLimit: 0,
            title: '',
            type: '',
            status: '',
            incomeDetail: '',
            content: '加载中...',
            floorstatus: false,
            noContent: false,
            checkboxChecked: true,
            share_Poup: false,
            pay_Poup: false,
            tip_Poup: false,
            checked: true,
            bottom: 'bottom',
            middle: 'middle',
            price: 0,
            referrerId: '',
            // showPopup: false,
            adjustPosition: false,
            name: '于平',
            mobile: '15928824314',
            authTime: '',
            authStatusValue: ''
            // isReferrerId: false,
            // addr: '',
            // addr: '四川省  成都市  武侯区  成都花园栋2单元2号',
        };
    },

    onLoad: function(option) {
        this.movieId = option.id;
        // this.getUserInfo();
        //         uni.showLoading({
        //             title: '正在加载...'
        //         });
        util.ajax(
            'movieDetail',
            {
                movieId: this.movieId,
                token: util.getUserToken()
            },
            data => {
                // uni.hideLoading();
                let json = data.data;
                if (json.status) {
                    console.log(json);
                    this.bannerSrc = json.data.info.coverImage;
                    this.title = json.data.info.title;

                    this.incomeDetail = json.data.info.incomeDetail;
                    this.type = json.data.type.text;
                    this.status = json.data.releaseStatus.text;
                    this.movieStatus = json.data.status.value;
                    this.movieStatusText = json.data.status.text;
                    this.salesOfMoney = json.salesOfMoney / 100;

                    this.percent = this.getScale(json.salesOfMoney, json.data.totalOfMoney);
                    this.scale =
                        this.getScale(json.salesOfMoney, json.data.totalOfMoney) === 0
                            ? '0%'
                            : this.getScale(json.salesOfMoney, json.data.totalOfMoney) + '%';

                    this.totalOfMoney = json.data.totalOfMoney / 1000000;
                    if (json.data.info.userLimit) {
                        this.userLimit = json.data.info.userLimit;
                    }
                    this.carousels = json.data.info.carousels;
                    // console.log(this.carousels);
                    this.price = json.data.info.priceOfUnit / 100;
                    this.surplusNum =
                        (json.data.totalOfMoney - json.salesOfMoney) / json.data.info.priceOfUnit;
                    if (json.data.info.riskWarning) {
                        this.riskWarning = json.data.info.riskWarning;
                    }

                    this.content = json.data.info.content;
                    this.deposit = util.showDecimal(json.data.info.deposit);
                }
            },
            (data, code) => {
                console.log(data);
                uni.showToast({
                    title: JSON.stringify(data.message),
                    icon: 'none',
                    duration: 1000
                });
            }
        );
    },
    // 获取滚动条当前位置
    onPageScroll: function(e) {
        if (e.scrollTop > 100) {
            this.floorstatus = true;
        } else {
            this.floorstatus = false;
        }
    },

    methods: {
        aaa() {
            return;
        },
        getUserInfo() {
            util.ajax(
                'userDetail',
                {
                    token: util.getUserToken()
                },
                data => {
                    let json = data.data;
                    if (json.status) {
                        console.log('个人中心');
                        this.authTime = json.data.authTime;
                        this.authStatusValue = json.data.authStatus.value;

                        if (this.authTime === 0) {
                            this.authStatus();
                        } else {
                            // this.checked = true;
                            uni.navigateTo({
                                url:
                                    './offerToBuy?price=' +
                                    this.price +
                                    '&userLimit=' +
                                    this.userLimit +
                                    '&deposit=' +
                                    this.deposit +
                                    '&movieId=' +
                                    this.movieId +
                                    '&surplusNum=' +
                                    this.surplusNum
                            });
                        }
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        authStatus() {
            uni.showModal({
                title: '温馨提示',
                content:
                    '根据国家相关监管政策要求，购买理财产品需实名认证。请实名认证后再认购产品。',
                cancelText: '去认证',
                cancelColor: '#cccccc',
                confirmText: '再看看',
                confirmColor: '#fff',
                success: res => {
                    if (res.confirm) {
                    } else if (res.cancel) {
                        if (this.authStatusValue === 'checking') {
                            uni.navigateTo({
                                url: '../my/toCertification3'
                            });
                        } else {
                            uni.navigateTo({
                                url: '../my/toCertification'
                            });
                        }
                    }
                },
                fail: () => {},
                complete: () => {}
            });
        },
        ///计算两个整数的百分比值
        getScale(num, total) {
            num = parseFloat(num);
            total = parseFloat(total);
            // if (isNaN(num) || isNaN(total)) {
            //   return "-";
            // }
            return total <= 0 ? 0 : Math.round((num / total) * 10000) / 100.0;
        },
        formatTime(timstamp) {
            return util.parseTime(timstamp);
        },
        agreement() {
            uni.navigateTo({
                url: '../my/tool/userAgreement'
            });
        },
        goTop() {
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 300
            });
        },
        toOfferBuy() {
            let token = util.getUserToken();
            console.log(token);
            if (token === '') {
                uni.navigateTo({
                    url: '../login/index'
                });
            } else {
                this.getUserInfo();
            }
        },
        hidePopup() {
            this.showPopup = false;
            this.share_Poup = false;
            this.pay_Poup = false;
            this.tip_Poup = false;
        },
        cancle() {
            this.share_Poup = false;
        }
        // show_payPoup() {
        // console.log(this.checkboxChecked);
        //             if (!this.addr) {
        //                 uni.showToast({
        //                     title: '请添加邮寄地址',
        //                     icon: 'none',
        //                     duration: 1000
        //                 });
        //                 return;
        //             }
        //             if (!this.referrerId) {
        //                 uni.showToast({
        //                     title: '请填写推荐人ID',
        //                     icon: 'none',
        //                     duration: 1000
        //                 });
        //                 return;
        //             }
        //
        //             if (!this.checkboxChecked) {
        //                 uni.showToast({
        //                     title: '请同意平台服务协议',
        //                     icon: 'none',
        //                     duration: 1000
        //                 });
        //                 return;
        //             }

        // this.showPopup = false;
        // uni.setStorageSync('inviteUserId', this.referrerId);
        // this.pay();
        // },
        //         pay() {
        //             switch (this.payType) {
        //                 case 'e_wallet':
        //                     break;
        //                 case 'Alipay':
        //                     break;
        //                 case 'wachat':
        //                     break;
        //                 case 'offline':
        //                     this.pay_Poup = true;
        //                     break;
        //             }
        //         },
        //         radioChange(e) {
        //             this.payType = e.target.value;
        //             console.log(this.payType);

        //             var changed = {};
        //             for (var i = 0; i < this.radioItems.length; i++) {
        //                 if (checked.indexOf(this.radioItems[i].name) !== -1) {
        //                     changed['radioItems[' + i + '].checked'] = true;
        //                 } else {
        //                     changed['radioItems[' + i + '].checked'] = false;
        //                 }
        //             }
        // },

        //         wachatPay() {
        //             uni.navigateTo({
        //                 url: './preorderSuccess'
        //             });
        //         },
        //         Alipay() {
        //             uni.navigateTo({
        //                 url: './buySuccess'
        //             });
        //         },
        //         onNumberChange(value) {
        //             if (value <= 1) {
        //                 this.numberValue = 1;
        //             } else {
        //                 if (value > this.userLimit) {
        //                     this.numberValue = this.userLimit;
        //                 } else {
        //                     this.numberValue = value;
        //                 }
        //             }
        //
        //             this.orderMoney = this.numberValue * this.price;
        //         }
    },
    components: {
        uniIcon,
        uniPopup,
        wxParse,
        uniNumberBox
    }
};
</script>
<style lang="less">
@import '../../common/icon.css';
@import '../../common/uni.css';
@import url('../../components/mpvue-wxparse/src/wxParse.css');

.uni-popup {
    box-shadow: none;
}
.projectDetail {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #eeeeee;
    padding-bottom: 100upx;
    overflow: hidden;
    .header {
        flex-direction: column;
        .swiperWrap {
            width: 100%;
            height: 418upx;
            color: white;
            position: relative;
            flex-direction: column;
            .titleWrap {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 164upx;
                flex-direction: column;
                .title {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    padding-left: 30upx;
                    box-sizing: border-box;
                    z-index: 2;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
										.name{
											color: #f6f6f6;
											font-size: 36upx;
										}
                    .subTitle {
                        margin: 10upx 0 20upx;
                        z-index: 2;
                        text {
                            background: rgba(255, 255, 255, 0.2);
                            font-size: 22upx;
                            padding: 10upx 20upx;
                            border-radius: 4upx;
                            color: #f6f6f6;
                        }
                        .type {
                            margin-right: 20upx;
                        }
                    }
                }

                image {
                    position: absolute;
                    z-index: 1;
                    width: 100%;
                    height: 100upx;
                    bottom: 0;
                    left: 0;
                }
            }
            image {
                width: 100%;
                height: 100%;
            }
            swiper {
                width: 100%;
                height: 418upx;

                .swiper_item {
                    position: relative;
                    width: 100%;
                    height: 418upx;
                }
            }
        }

        .head-bottom {
            flex-direction: column;
            padding: 30upx;
            box-sizing: border-box;
            background: white;
            .cardWrap-content {
                width: 100%;
                display: flex;
                flex-direction: column;
                .data {
                    width: 100%;
                    font-size: 25upx;
                    justify-content: space-between;
                    .dataItem {
                        text:first-child {
                            margin-bottom: 10upx;
                        }
                        text:last-child {
                            color: #333333;
                        }
                    }
                    .bought {
                        color: red;
                        width: 50%;
                        display: flex;
                        flex-direction: column;
                        text:first-child {
                            margin-bottom: 10upx;
                        }
                    }
                    .right {
                        width: 42%;
                        justify-content: space-between;
                        .reach {
                            color: #999999;
                            display: flex;
                            flex-direction: column;
                            text-align: center;
                        }
                    }
                }
                .progress-box {
                    display: flex;
                    height: 50upx;
                    progress {
                        width: 100%;
                        border-radius: 50%;
                    }
                }
            }
            .cardWrap-footer {
                width: 100%;
                color: #999999;
                font-size: 25upx;
                justify-content: flex-end;
            }
        }
        .condition {
            height: 200upx;
            justify-content: center;
            align-items: center;
            background: white;
            image {
                width: 30upx;
            }
            text {
                font-size: 26upx;
                color: #b57230;
                margin: 0 10upx;
            }
            .gray {
                color: #cccccc;
            }
        }
    }
    .buy_process {
        flex-direction: column;
        padding: 40upx 30upx;
        background: white;
        margin-top: 20upx;
        .process_title {
            font-size: 32upx;
            color: #999999;
            margin-bottom: 40upx;
            align-items: center;
            justify-content: center;
            text {
                color: #000000;
                font-weight: 600;
                margin: 0 30upx;
            }
        }
        .process_content {
            .item {
                // border: 1px solid red;
                position: relative;
                width: 25%;
                flex-direction: column;
                align-items: center;
                .blueBj {
                    background: #3c80ae;
                }
                .orangeBj {
                    background: #fc5945;
                }
                .greenBj {
                    background: #259b24;
                }
                .redBj {
                    background: #ff1268;
                }
                .blue {
                    color: #3c80ae;
                }
                .orange {
                    color: #fc5945;
                }
                .green {
                    color: #259b24;
                }
                .red {
                    color: #ff1268;
                }
                .item_iconWrap {
                    width: 60upx;
                    height: 60upx;
                    border-radius: 50upx;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 20upx;
                    i {
                        color: white;
                    }
                }
                .item_info {
                    width: 90%;
                    font-size: 25upx;
                    justify-content: center;
                    text-align: center;
                }
                text {
                    color: #999999;
                    font-size: 35upx;
                    position: absolute;
                    top: 1upx;
                    left: 154upx;
                }
            }
        }
        .process_footer {
            color: #bbbbbb;
            margin-top: 40upx;
            align-items: center;
            justify-content: center;
            text {
                font-size: 26upx;
                margin-right: 20upx;
            }
            .iconfont {
                font-size: 40upx;
                background: white;
            }
        }
    }
    .Details {
        .content {
			view{
				display: block;
			}
			image {
				max-width: 100%;
				height: 100%;
				display: block;
			}
            width: 100%;
            .wxParse {
                width: 100%;
                .p {
                    max-width: 100%;
                    margin: 0;
                }
                view {
                    display: block;
                    
                }

            }
        }
    }
    .footerTip {
        padding: 44upx 30upx 120upx;
        box-sizing: border-box;
        .tipWord {
            width: 100%;
            font-size: 24upx;
            color: #999999;
            flex-direction: initial;
            align-items: center;

            .agree {
                display: ;
                width: 100%;
                display: block;
                text-align: center;
                view {
                    text-align: center;
                    display: flex;
                    justify-content: center;
                }
                .red {
                    color: #ff1268;
                    display: inline;
                }
            }
        }
    }
    .goTop {
        position: fixed;
        bottom: 160upx;
        right: 44upx;
        width: 96upx;
        height: 96upx;
        border-radius: 50%;
        background: white;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 0px 20px #b8b8b8;
        .iconfont {
            color: #000000;
            font-size: 30upx;
        }
    }
    .footerFixed {
        background: white;
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 98upx;
        box-shadow: 0 0 0.277778rem #e8e6e6;
        .wrap {
            width: 100%;
            .left {
                justify-content: space-around;
                width: 50%;
                background: white;
                padding: 0 28upx;
                box-sizing: border-box;
                view {
                    justify-content: center;
                    align-items: center;
                    font-size: 26upx;
                    color: #333333;
                    .iconfont {
                        margin-right: 10upx;
                        font-size: 36upx;
                    }
                }
            }
            .buyBtn {
                font-size: 30upx;
                width: 50%;
                background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
                background: -o-linear-gradient(to right, #ff48ac, #ff1268);
                background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
                background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
                background: linear-gradient(to right, #ff48ac, #ff1268);
                color: white;
                justify-content: center;
                align-items: center;
            }
            .toOfferBuy_hover {
                background-color: linear-gradient(to right, #ff48ac, #ff1268);
                opacity: 0.85;
            }
        }
        .preheating {
            width: 100%;
            justify-content: space-between;
            padding: 0 40upx;
            .left {
                align-items: center;
                font-size: 26upx;
                color: #333333;
                view {
                    justify-content: center;
                    align-items: center;
                    font-size: 26upx;
                    color: #333333;
                    .iconfont {
                        margin-right: 10upx;
                        font-size: 36upx;
                    }
                }
            }
            .preheatingText {
                justify-content: center;
                align-items: center;
                color: #ff9800;
            }
            .gray {
                color: #cccccc;
            }
            .red {
                color: #ff1268;
            }
        }
    }
    .buyPoup {
        position: fixed;
        bottom: 0;
        background: white;
        flex-direction: column;
        border-top-left-radius: 50upx;
        border-top-right-radius: 50upx;
        width: 100%;
        padding: 30upx;
        padding-bottom: 100upx;
        box-sizing: border-box;
        .header {
            flex-direction: column;
            border-bottom: 1px solid #eeeeee;
            padding-bottom: 20upx;
            .title {
                margin-bottom: 40upx;
                text:first-child {
                    font-size: 28upx;
                    color: #333333;
                    margin-right: 10upx;
                }
                .gray {
                    font-size: 24upx;
                    color: #999999;
                }
            }
            .info {
                justify-content: space-between;
                .info_text {
                    flex-direction: column;
                    font-size: 26upx;
                    color: #333333;
                }
                .noAddress {
                    color: #ff1268;
                    flex-direction: row;
                    text {
                        margin-left: 10upx;
                    }
                }
                .icon {
                    align-items: center;
                    color: #cccccc;
                }
            }
        }
        .buy_num {
            justify-content: space-between;
            height: 98upx;
            align-items: center;
            border-bottom: 1px solid #eeeeee;
            .title {
                text:first-child {
                    font-size: 28upx;
                    color: #333333;
                    margin-right: 10upx;
                }
                .gray {
                    font-size: 24upx;
                    color: #999999;
                    justify-content: center;
                }
            }
            .num {
            }
        }
        .referrer {
            align-items: center;
            .uni-input {
                align-items: center;
            }
        }
        .payType_title {
            padding-top: 30upx;
            padding-bottom: 20upx;
            text:first-child {
                font-size: 28upx;
                color: #333333;
                margin-right: 10upx;
            }
            .gray {
                font-size: 24upx;
                color: #999999;
            }
        }
        .payType {
            .radioGroup {
                width: 100%;

                .radio {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    height: 100upx;
                    .leftType {
                        align-items: center;
                        .iconWrap {
                            background: #ff1268;
                            width: 70upx;
                            height: 70upx;
                            border-radius: 50%;
                            color: white;
                            align-items: center;
                            justify-content: center;
                            margin-right: 30upx;
                            .iconfont {
                                font-size: 40upx;
                            }
                        }
                        .gray {
                            flex-wrap: nowrap;
                            color: #999999;
                            font-size: 24upx;
                        }
                        .Alipay {
                            background: #1196da;
                        }
                        .wachat {
                            background: #29a415;
                        }
                        .offline {
                            background: #2e3245;
                        }
                    }
                }
            }
        }
        .agree {
            width: 100%;
            height: 100upx;
            justify-content: space-between;
            align-items: center;
        }
    }
    .popopFooterFixed {
        width: 100%;
        padding: 0;
        .left {
            width: 75%;
            flex-direction: row;
            justify-content: flex-end;
            .price {
                font-size: 30upx;
                color: #ff1268;
                margin-left: 16upx;
            }
        }
        .order {
            width: 25%;
        }
    }
    .uni-popup-middle {
        background: transparent;
    }
    .tip_Wrap {
        width: 100%;
        background: transparent;
        .wordWrap {
            background: white;
            margin: 0 auto;
            width: 90%;
            border-radius: 16upx;
            flex-direction: column;
            .tipTitle {
                padding: 30upx 0;
                justify-content: center;
                color: rgb(51, 51, 51);
                font-size: 30upx;
            }
            .tipContent {
                padding: 0 40upx;
                color: rgb(153, 153, 153);
                font-size: 28upx;
                margin-bottom: 30upx;
            }
            .tipButton {
                width: 100%;

                justify-content: center;
                align-items: center;
                background: #d9ecff;
                color: rgb(107, 181, 255);
                height: 88upx;
                font-size: 30upx;
                border-bottom-right-radius: 16upx;
                border-bottom-left-radius: 16upx;
            }
        }
    }
    .sharePoup {
        width: 100%;
        background: transparent;
        position: fixed;
        bottom: 16upx;
        .sharePoupWrap {
            background: white;
            margin: 0 auto;
            width: 96%;
            border-radius: 16upx;
            flex-direction: column;
            .top {
                height: 216upx;
                justify-content: space-around;
                .item {
                    flex-direction: column;
                    // justify-content: center;
                    align-items: center;
                    width: 33.33%;
                    image {
                        width: 78upx;
                        margin-top: 60upx;
                    }
                    text {
                        font-size: 20upx;
                        color: #333333;
                        margin: 20upx 0;
                    }
                }
            }
            .bottom {
                font-size: 32upx;
                color: #ff1268;
                height: 104upx;
                justify-content: center;
                align-items: center;
                border-top: 1px solid #dddddd;
            }
        }
    }
    .pay_Poup {
        width: 100%;
        height: auto;
        background: transparent;
        position: relative;
        .close {
            position: absolute;
            top: -18upx;
            right: -2upx;
            color: #999999;
        }
        .pay_PoupWrap {
            background: white;
            width: 100%;
            margin: 0 auto;
            border-radius: 10upx;
            flex-direction: column;

            .line1 {
                height: 120upx;
                width: 100%;
                font-size: 30upx;
                color: #000000;
                border-bottom: 1px solid #dddddd;
                align-items: center;
                text {
                    color: #ff1268;
                    font-size: 32upx;
                }
            }
            .line2 {
                width: 100%;
                height: 88upx;
                align-items: center;
                justify-content: space-between;
                font-size: 26upx;
                color: #333333;
                border-bottom: 1px solid #dddddd;
            }
            .middle {
                flex-direction: column;
                color: #333333;
                font-size: 30upx;
                padding: 30upx 0 50upx;
                justify-content: center;
                .mid-title {
                    color: #333333;
                    font-size: 30upx;
                    font-weight: 600;
                    text-align: center;
                }
                view {
                    color: #ff1268;
                    font-size: 24upx;
                    margin-top: 20upx;
                    justify-content: center;
                    align-items: center;
                    text {
                        font-size: 56upx;
                    }
                    text:last-child {
                        font-size: 24upx;
                        margin-left: 10upx;
                    }
                }
            }
            .btn {
                width: 80%;
                border: 1px solid #dddddd;
                border-radius: 4upx;
                height: 80upx;
                align-items: center;
                justify-content: center;
                margin: 0 auto;
                text {
                    font-size: 28upx;
                    color: #333333;
                    margin-left: 15upx;
                }
            }
            .wachat {
                margin-bottom: 30upx;
                .iconfont {
                    color: #259b24;
                }
            }
            .Alipay {
                margin-bottom: 30upx;
                .iconfont {
                    color: #1296d9;
                }
            }
        }
    }
}
</style>
